<template>
  <div>
    <upload v-show="false" @upload-success="uploadSuccess" />
    <quill-editor
      class="que-editor"
      :value="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>
<script>
import { quillEditor, Quill } from "vue-quill-editor"; //调用编辑器
import { container, ImageExtend, QuillWatch } from "quill-image-paste-module";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import upload from "./upload.vue";
import { mapState } from "vuex";
Quill.register("modules/ImageExtend", ImageExtend);
let _that = null;
export default {
  components: {
    quillEditor,
    upload,
  },
  props: {
    content: {
      type: String,
      default: "",
    },
  },
  computed: {
    ...mapState({
      url: (state) => state.url,
      token: (state) => state.user.token,
    }),
  },
  data() {
    const toolOptions = [
      ["bold", "italic", "underline", "strike"],
      ["blockquote", "code-block"],
      [{ header: 1 }, { header: 2 }],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ script: "sub" }, { script: "super" }],
      [{ indent: "-1" }, { indent: "+1" }],
      [{ direction: "rtl" }],
      [{ size: ["small", false, "large", "huge"] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      [{ font: [] }],
      [{ align: [] }],
      ["clean"],
      ["link", "image", "video"],
    ];
    return {
      editorOption: {
        modules: {
          ImageExtend: {
            loading: true, // 可选参数 是否显示上传进度和提示语
            name: "img", // 图片参数名
            size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
            action: "http://10.60.36.55:8166//file/uploadOtherImg", // 服务器地址, 如果action为空，则采用base64插入图片
            // response 为一个函数用来获取服务器返回的具体图片地址
            // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
            // 则 return res.data.url
            response: (res) => {
              return res.info;
            },
            headers: (xhr) => {
              console.log(xhr);
            }, // 可选参数 设置请求头部
            sizeError: () => {}, // 图片超过大小的回调
            start: () => {}, // 可选参数 自定义开始上传触发事件
            end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {}, // 可选参数 上传失败触发的事件
            success: () => {}, // 可选参数  上传成功触发的事件
            change: (xhr, formData) => {}, // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: {
            container: container,
            handlers: {
              image(value) {
                QuillWatch.emit(this.quill.id);
              },
              upload(value) {
                //编辑器-上传文件
                if (value) {
                  // document.querySelector(".uploadFile input").click();
                }
              },
            },
          },
        },
      },
    };
  },
  created() {
    _that = this;
  },
  methods: {
    uploadSuccess(e) {
      console.log(e);
      const { path } = e;
      const { url } = this.$store.state;
      console.log();
      let quill = this.$refs.myQuillEditor.quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片，res为服务器返回的图片链接地址
      quill.insertEmbed(length, "image", url + path);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange(value) {
      console.log(value);
      this.$emit("update:content", value.html);
    }, // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
};
</script>


 <style lang="scss" scoped>
.que-editor {
  min-width: 800px;
  // height: 600px;
}

::v-deep .ql-container {
  height: 600px !important;
}

.introduce {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  margin-bottom: 20px;
}
</style>
